//
// Navbars (Redux)
// --------------------------------------------------


// COMMON STYLES
// -------------

// Base class and wrapper
.navbar {
	overflow: visible;
	margin-bottom: @baseLineHeight;
	color: @navbarText;
	// Fix for IE7's bad z-indexing so dropdowns don't appear below content that follows the navbar
	*position: relative;
	*z-index: 2;
}

// Inner for background effects
// Gradient is applied to its own element because overflow visible is not honored by IE when filter is present
.navbar-inner {
	min-height: @navbarHeight;
	padding-left: @navbarHeight / 4;
	padding-right: @navbarHeight / 4;
	background-color: @navbarBackground;
	// Prevent floats from breaking the navbar
	.clearfix();
}

// Set width to auto for default container
// We then reset it for fixed navbars in the #gridSystem mixin
.navbar .container {
	width: auto;
}

// Override the default collapsed state
.nav-collapse.collapse {
	height: auto;
}


// Brand: website or project name
// -------------------------
.navbar .brand {
	float: left;
	display: block;
	// Vertically center the text given @navbarHeight
	padding: 0 @navbarHeight / 4 @navbarHeight * 0.05 @navbarHeight / 4;
	margin-left: -@navbarHeight / 4; // negative indent to left-align the text down the page
	font-size: @navbarHeight * 0.55;
	line-height: @navbarHeight * 0.95;
	font-weight: 100;
	color: @navbarBrandColor;

	&:hover {
		text-decoration: none;
		background-color: @navbarLinkBackgroundHover;
	}
}

// Plain text in topbar
// -------------------------
.navbar-text {
	margin-bottom: 0;
	line-height: @navbarHeight;
}

// Janky solution for now to account for links outside the .nav
// -------------------------
.navbar-link {
	color: @navbarLinkColor;

	&:hover {
		color: @navbarLinkColorHover;
	}
}

// Dividers in navbar
// -------------------------
.navbar .divider-vertical {
	height: @navbarHeight / 2;
	margin: @navbarHeight / 4 0;
	border-left: 1px solid @navbarLinkColor;
}

// Buttons in navbar
// -------------------------
.navbar .btn,
.navbar .btn-group {
	.navbarVerticalAlign(@navbarHeight); // Vertically center in navbar
}

	.navbar .btn-group .btn,
	.navbar .input-append .btn {
		margin-top: 0; // then undo the margin here so we don't accidentally double it
	}

// Navbar forms
// -------------------------
.navbar-form {
	margin-bottom: 0; // remove default bottom margin
	.clearfix();

	input,
	select,
	.radio,
	.checkbox {
		.navbarVerticalAlign(30px); // Vertically center in navbar
	}

	input,
	select,
	.btn {
		display: inline-block;
		margin-bottom: 0;
	}

		input[type="image"],
		input[type="checkbox"],
		input[type="radio"] {
			margin-top: 3px;
		}

	.input-append {
		margin-top: 6px;
		white-space: nowrap; // preven two  items from separating within a .navbar-form that has .pull-left
		input {
			margin-top: 0; // remove the margin on top since it's on the parent
		}
	}
}

// Navbar search
// -------------------------
.navbar-search {
	position: relative;
	float: left;
	.navbarVerticalAlign(30px); // Vertically center in navbar
	margin-bottom: 0;

	.search-query {
		margin-bottom: 0;
		padding: 4px 14px;
		#font > .sans-serif(13px, normal, 1);
	}
}



// Static navbar
// -------------------------

.navbar-static-top {
	position: static;
	width: 100%;
	margin-bottom: 0; // remove 18px margin for default navbar
	.navbar-inner {
	}
}



// Fixed navbar
// -------------------------

// Shared (top/bottom) styles
.navbar-fixed-top,
.navbar-fixed-bottom {
	position: fixed;
	right: 0;
	left: 0;
	z-index: @zindexFixedNavbar;
	margin-bottom: 0; // remove 18px margin for default navbar
}

	.navbar-fixed-top .navbar-inner,
	.navbar-static-top .navbar-inner {
		border-width: 0 0 1px;
	}

	.navbar-fixed-bottom .navbar-inner {
		border-width: 1px 0 0;
	}

	.navbar-fixed-top .navbar-inner,
	.navbar-fixed-bottom .navbar-inner {
		padding-left: 0;
		padding-right: 0;
	}

	// Reset container width
	// Required here as we reset the width earlier on and the grid mixins don't override early enough
	.navbar-static-top .container,
	.navbar-fixed-top .container,
	.navbar-fixed-bottom .container {
		#grid > .core > .span(@gridColumns);
	}

// Fixed to top
.navbar-fixed-top {
	top: 0;
}

// Fixed to bottom
.navbar-fixed-bottom {
	bottom: 0;
}



// NAVIGATION
// ----------

.navbar .nav {
	position: relative;
	left: 0;
	display: block;
	float: left;
	margin: 0 10px 0 0;
}

	.navbar .nav.pull-right {
		float: right; // redeclare due to specificity
		margin-right: 0; // remove margin on float right nav
	}

	.navbar .nav > li {
		float: left;
	}

	// Links
	.navbar .nav > li {

		& > a {
			float: none;
			// Vertically center the text given @navbarHeight
			padding: ((@navbarHeight - @baseLineHeight) / 2) (@navbarHeight / 4);
			color: @navbarLinkColor;
			height: @baseLineHeight;
			text-decoration: none;

			[class^="icon-24"],
			[class*=" icon-24"] {
				margin-top: ((@baseLineHeight * 1.1) - 24) / 2;
			}

			[class^="icon-16"],
			[class*=" icon-16"] {
				margin-top: (@baseLineHeight - 16) / 2;
			}
		}

		&.small > a {
			font-size: 86%;
			padding-right: (@baseLineHeight / 4);
			padding-left: (@baseLineHeight / 4);
		}
	}

.navbar .nav .dropdown-toggle .caret {
	margin-top: 8px;
}

// Hover
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
	background-color: @navbarLinkBackgroundHover; // "transparent" is default to differentiate :hover from .active
	color: @navbarLinkColorHover;
	text-decoration: none;
}

// Active nav items
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
	color: @navbarLinkColorActive;
	text-decoration: none;
	background-color: @navbarLinkBackgroundActive;
}

// Navbar button for toggling navbar items in responsive layouts
// These definitions need to come after '.navbar .btn'
.navbar .btn-navbar {
	display: none;
	float: right;
	padding: 12px 10px 7px 10px;
	margin-left: 5px;
	margin-right: 5px;
	min-width: 0;
	height: @navbarHeight;
	.buttonBackground(@navbarBackground, @navbarBackgroundHighlight);
}

	.navbar .btn-navbar .icon-bar {
		display: block;
		margin: 0;
		margin-top: 2px;
		width: 18px;
		height: 2px;
		background-color: #f5f5f5;
	}

.btn-navbar .icon-bar + .icon-bar {
	margin-top: 3px;
}



// Dropdown menus
// --------------

// Menu position and menu carets
.navbar .nav > li > .dropdown-menu {
	border-top: 0 none;
	border-color: @navbarBackground;
}
// Menu position and menu caret support for dropups via extra dropup class
.navbar-fixed-bottom .nav > li > .dropdown-menu {

	border-top: 2px solid;
	border-bottom: 0 none;
	border-color: @navbarBackground;
}

// Remove background color from open dropdown
.navbar .nav li.dropdown.open > .dropdown-toggle,
.navbar .nav li.dropdown.active > .dropdown-toggle,
.navbar .nav li.dropdown.open.active > .dropdown-toggle {
	background-color: @navbarLinkBackgroundActive;
	color: @navbarLinkColorActive;
}

.navbar .nav li.dropdown > .dropdown-toggle .caret {
	border-top-color: @navbarLinkColor;
	border-bottom-color: @navbarLinkColor;
}

.navbar .nav li.dropdown.open > .dropdown-toggle .caret,
.navbar .nav li.dropdown.active > .dropdown-toggle .caret,
.navbar .nav li.dropdown.open.active > .dropdown-toggle .caret {
	border-top-color: @navbarLinkColorActive;
	border-bottom-color: @navbarLinkColorActive;
}

// Right aligned menus need alt position
.navbar .pull-right > li > .dropdown-menu,
.navbar .nav > li > .dropdown-menu.pull-right {
	left: auto;
	right: 0;

	&:before {
		left: auto;
		right: 12px;
	}

	&:after {
		left: auto;
		right: 13px;
	}

	.dropdown-menu {
		left: auto;
		right: 100%;
		margin-left: 0;
		margin-right: -1px;
	}
}


// Inverted navbar
// -------------------------

.navbar-inverse {
	color: @navbarInverseText;

	.navbar-inner {
		//color: #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
		border-color: @navbarInverseBorder;
	}

	.brand,
	.nav > li > a {
		color: @navbarInverseLinkColor;

		&:hover {
			color: @navbarInverseLinkColorHover;
		}
	}

		.nav > li > a:focus,
		.nav > li > a:hover {
			background-color: @navbarInverseLinkBackgroundHover;
			color: @navbarInverseLinkColorHover;
		}

	.nav .active > a,
	.nav .active > a:hover,
	.nav .active > a:focus {
		color: @navbarInverseLinkColorActive;
		background-color: @navbarInverseLinkBackgroundActive;
	}
	// Inline text links
	.navbar-link {
		color: @navbarInverseLinkColor;

		&:hover {
			color: @navbarInverseLinkColorHover;
		}
	}
	// Dividers in navbar
	.divider-vertical {
		border-left-color: @navbarInverseBackground;
		border-right-color: @navbarInverseBackgroundHighlight;
	}
	// Dropdowns
	.nav li.dropdown.open > .dropdown-toggle,
	.nav li.dropdown.active > .dropdown-toggle,
	.nav li.dropdown.open.active > .dropdown-toggle {
		background-color: @navbarInverseLinkBackgroundActive;
		color: @navbarInverseLinkColorActive;
	}

	.nav li.dropdown > .dropdown-toggle .caret {
		border-top-color: @navbarInverseLinkColor;
		border-bottom-color: @navbarInverseLinkColor;
	}

	.nav li.dropdown.open > .dropdown-toggle .caret,
	.nav li.dropdown.active > .dropdown-toggle .caret,
	.nav li.dropdown.open.active > .dropdown-toggle .caret {
		border-top-color: @navbarInverseLinkColorActive;
		border-bottom-color: @navbarInverseLinkColorActive;
	}
	// Navbar search
	.navbar-search {
		.search-query {
			color: @white;
			background-color: @navbarInverseSearchBackground;
			border-color: @navbarInverseSearchBorder;
			.transition(none);
			.placeholder(@navbarInverseSearchPlaceholderColor);
			// Focus states (we use .focused since IE7-8 and down doesn't support :focus)
			&:focus,
			&.focused {
				padding: 5px 15px;
				color: @grayDark;
				background-color: @navbarInverseSearchBackgroundFocus;
				border: 0;
				outline: 0;
			}
		}
	}
	// Navbar collapse button
	.btn-navbar {
		.buttonBackground(darken(@navbarInverseBackgroundHighlight, 5%), darken(@navbarInverseBackground, 5%));
	}
}
